<template>
  <div class="side-container" :class="{ 'is-collapsed': isCollapsed }">
    <!-- Logo区域 -->
    <div class="logo-area">
      <img src="../assets/logo.svg" alt="Logo" class="logo-image" />
      <h1 v-show="!isCollapsed">智能出题系统</h1>
      <!-- <el-icon 
        class="collapse-icon"
        @click="toggleCollapse"
      >
        <Fold v-if="!isCollapsed"/>
        <Expand v-else/>
      </el-icon> -->
    </div>

    <!-- 导航菜单 -->
    <el-menu
      class="side-menu"
      :default-active="activeIndex"
      background-color="#ffffff"
      text-color="#333333"
      active-text-color="#1890ff"
      :collapse="isCollapsed"
      router>
      
      <!-- 首页 -->
      <el-menu-item index="/home">
        <el-icon><House /></el-icon>
        <template #title>{{ $t('common.home') }}</template>
      </el-menu-item>

        <!-- 首页 -->
      <el-menu-item index="/graph">
        <el-icon><Coin /></el-icon>
        <template #title>知识图谱</template>
      </el-menu-item>

      <!-- 题库管理 -->
      <el-menu-item index="/subject">
        <el-icon><Document /></el-icon>
        <template #title>{{ $t('common.subjectManagement') }}</template>
      </el-menu-item>

      <!-- 试卷管理 -->
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Files /></el-icon>
          <span>{{ $t('common.paperManagement') }}</span>
        </template>
        <el-menu-item index="/paper/list">{{ $t('paper.list') }}</el-menu-item>
        <el-menu-item index="/paper/create">{{ $t('paper.create') }}</el-menu-item>
      </el-sub-menu>

      <!-- 统计分析 -->
      <el-menu-item index="/statistics">
        <el-icon><TrendCharts /></el-icon>
        <template #title>{{ $t('common.statisticsAnalysis') }}</template>
      </el-menu-item>

        <!-- 使用文档-->
        <el-menu-item index="/help">
          <el-icon><HelpFilled /></el-icon>
        <template #title>{{ $t('common.useDocument') }}</template>
      </el-menu-item>
    </el-menu>

    <!-- 用户信息区域 -->
    <div class="user-area">
      <template v-if="!isCollapsed">
        <el-divider content-position="center">
          <span class="divider-title">AI 模型</span>
        </el-divider>
        <div class="model-select">
          <div class="model-options">
            <div
              v-for="option in modelOptions"
              :key="option.value"
              class="model-option"
              :class="{ 'is-active': currentModel === option.value }"
              @click="handleModelChange(option.value)"
            >
              <div class="model-icon">
                <img :src="option.icon" :alt="option.label" class="model-logo"/>
              </div>
              <div class="model-info">
                <span class="model-name">{{ option.label }}</span>
                <span class="model-desc">{{ option.desc }}</span>
              </div>
              <div class="model-check">
                <el-icon v-if="currentModel === option.value"><Check /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </template>
      <el-dropdown trigger="click" @command="handleCommand">
        <div class="user-info">
          <el-avatar :size="isCollapsed ? 32 : 40" :src="userAvatar">
            {{ userInfo.username ? userInfo.username[0].toUpperCase() : 'U' }}
          </el-avatar>
          <template v-if="!isCollapsed">
            <div class="user-details">
              <span class="username">{{ userInfo.username || '未登录' }}</span>
              <small class="user-email">{{ userInfo.email || '' }}</small>
            </div>
            <el-icon class="dropdown-icon"><CaretTop /></el-icon>
          </template>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">
              <el-icon><User /></el-icon>个人中心
            </el-dropdown-item>
            <!-- <el-dropdown-item command="settings">
              <el-icon><Setting /></el-icon>账号设置
            </el-dropdown-item> -->
            <el-dropdown-item divided command="logout" type="danger">
              <el-icon><SwitchButton /></el-icon>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { 
  House, 
  Document, 
  Files, 
  Grid, 
  TrendCharts,
  User,
  Setting,
  SwitchButton,
  CaretTop,
  Fold,
  Expand,
  Check,
  Coin,
  HelpFilled
} from '@element-plus/icons-vue'
import { request } from '../api/request'

const router = useRouter()
const route = useRoute()

// 根据当前路由设置激活菜单项
const activeIndex = ref(route.path)

// 用户信息
const userInfo = ref({
  username: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).username : '',
  email: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).email : '',
})

// 添加模型选择相关的数据
const currentModel = ref(localStorage.getItem('aiModel') || 'deepseek')
const modelOptions = [
  { 
    label: 'Deepseek', 
    value: 'deepseek',
    desc: '强大的通用模型',
    icon: new URL('../assets/model-icons/deepseek.png', import.meta.url).href
  },
  { 
    label: 'Kimi', 
    value: 'kimi',
    desc: '擅长中文理解',
    icon: new URL('../assets/model-icons/kimi.png', import.meta.url).href
  },
  { 
    label: 'Qianwen', 
    value: 'qianwen',
    desc: '阿里通义千问',
    icon: new URL('../assets/model-icons/qianwen.png', import.meta.url).href
  }
]

// 处理模型变化
const handleModelChange = (value) => {
  localStorage.setItem('aiModel', value)
  currentModel.value = value
}

// 用户头像（如果有的话）
const userAvatar = ref('')

// 添加折叠状态
const isCollapsed = ref(false)

// 添加 emit
const emit = defineEmits(['collapse-change'])

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
  emit('collapse-change', isCollapsed.value)
}

// 添加监听器以确保状态同步
watch(isCollapsed, (newVal) => {
  emit('collapse-change', newVal)
})

// 处理下拉菜单命令
const handleCommand = async (command) => {
  switch (command) {
    case 'profile':
      router.push('/user/profile')
      break
    case 'settings':
      router.push('/user/settings')
      break
    case 'logout':
      await handleLogout()
      break
  }
}

// 处理退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 清除本地存储的用户信息和token
    localStorage.removeItem('user')
    localStorage.removeItem('token')
    
    ElMessage.success('已退出登录')
    
    // 跳转到登录页
    router.push('/login')
  } catch (error) {
    // 用户取消退出
  }
}

// 监听路由变化
onMounted(() => {
  activeIndex.value = route.path
  localStorage.setItem('aiModel', "deepseek")
  currentModel.value = "deepseek"
})
</script>

<style scoped>
.side-container {
  height: 100vh;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: width 0.3s;
  width: 100%;
}

.side-container.is-collapsed {
  width: 64px;
}

.logo-area {
  height: 64px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  position: relative;
}
.logo-area h1 {
  text-align: left;
}

.collapse-icon {
  cursor: pointer;
  font-size: 20px;
  color: #666;
  transition: all 0.3s;
  padding: 8px;
  border-radius: 4px;
}

.collapse-icon:hover {
  color: #1890ff;
  background-color: #e6f7ff;
}

.logo-area h1 {
  color: black;
  font-size: 20px;
  margin: 0;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.is-collapsed .logo-area {
  padding: 0 12px;
  justify-content: center;
}

.is-collapsed .logo-area h1 {
  display: none;
}

.is-collapsed .user-details,
.is-collapsed .dropdown-icon {
  display: none;
}

/* 调整折叠时的用户区域样式 */
.is-collapsed .user-area {
  padding: 12px 0;
  display: flex;
  justify-content: center;
}

.is-collapsed .user-info {
  padding: 4px;
  justify-content: center;
}

.side-menu {
  border-right: none;
  flex: 1;
}

/* 用户信息区域样式 */
.user-area {
  border-top: 1px solid #f0f0f0;
  padding: 16px;
  margin-top: auto;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.user-details {
  margin-left: 12px;
  flex: 1;
}

.username {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.2;
}

.user-email {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 2px;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  /* max-width: 100px; 设置最大宽度 */
}

.dropdown-icon {
  margin-left: 8px;
  color: #999;
  transition: transform 0.3s ease;
}

.user-info:hover .dropdown-icon {
  transform: rotate(180deg);
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}

:deep(.el-dropdown-menu__item .el-icon) {
  margin-right: 4px;
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
}

:deep(.el-menu-item.is-active) {
  background-color: #e6f7ff !important;
  color: #1890ff !important;
  border-right: 3px solid #1890ff;
}

:deep(.el-menu-item:hover), :deep(.el-sub-menu__title:hover) {
  background-color: #f5f5f5 !important;
}

.el-icon {
  margin-right: 10px;
  width: 24px;
  text-align: center;
}

.logo-image {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

/* 模型选择样式 */
.model-select {
  padding: 0 16px 16px;
}

.divider-title {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.model-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.model-option {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background-color: #f5f7fa;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.model-option:hover {
  background-color: #ecf5ff;
}

.model-option.is-active {
  background-color: #ecf5ff;
  border-color: #409EFF;
}

.model-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: white;
  margin-right: 12px;
  border: 1px solid #e4e7ed;
  padding: 4px;
}

.model-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.model-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.model-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
}

.model-desc {
  font-size: 12px;
  color: #909399;
}

.model-check {
  color: #409EFF;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 修改分割线样式 */
:deep(.el-divider__text) {
  background-color: transparent;
  padding: 0 12px;
}
</style>